<template>
	<view class="mslbox">
		<uni-data-picker :placeholder="placeholder" :map='map' :popup-title="popupTitle" :localdata="ctgList" v-model="classes"
			@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
		</uni-data-picker>
	</view>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed,watch} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import {getClassifyList} from "@/api/consult.js"
	
	export default defineComponent({
		components:{
			
		},
		props:{
			modelValue: '',
			placeholder:'',
			popupTitle:''
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				map:{text:'name',value:'_id'},
				classes: '',
				ctgList: []
			})
			
			onMounted(async ()=>{
				const res = await getClassifyList({
					from:'EJConsult',
				})
				state.ctgList = res.data.data
				state.classes = props.modelValue
			})
			
			watch(() => props.modelValue, (n, o) => {
			  state.classes = n
			})
			
			const onnodeclick =(e)=> {
				//console.log(e);
			}
			const onpopupopened =(e)=>  {
				//console.log('popupopened');
			}
			const onpopupclosed =(e) =>  {
				//console.log('popupclosed');
			}
			const onchange =(e) => {
				console.log('onchange:', e.detail.value);
				proxy.$emit('update:modelValue',state.classes)
				proxy.$emit('change',e.detail.value)
			}
			
			return {
				...toRefs(state),
				onnodeclick,
				onpopupopened,
				onpopupclosed,
				onchange
			}
		}
	})
</script>

<style lang="scss">
	.mslbox{
		box-sizing: border-box;
		height: 100%;
		width: 100%;
	}
</style>
